<template>
	<div class="index">
		<div class='page'>
			<div class="card">
				<ul class="quick-nav">
		            <li>
		                <a href="">影院热映</a>
		            </li>
		              <li>
		                  <a href="">租房找室友</a>
		              </li>
		            <li>
		                <a id="hot-topics" href="">豆瓣时间</a>
		            </li>
		            <li>
		                <a href="https://www.douban.com/doubanapp/app?channel=card_home&amp;direct_dl=1">使用豆瓣App</a>
		            </li>
	        	</ul>
				<section id="recommend-feed">
				  	<div data-reactroot="">
				    	<div class="feed-section">
				      		<a class="feed-item" v-for="item in centen">
				        		<div class="feed-content">
				          			<div class="cover" v-if="item.target.cover_url" :style="'position: relative; background: url('+item.target.cover_url+') center center / cover no-repeat rgb(250, 250, 250);'">
				            			<div style="padding-top: 100%;"></div>
				          			</div>
			          				<h3>{{item.title}}</h3>
				          			<p>{{item.target.desc}}</p>
				        		</div>
						        <div class="author">
						          <!-- react-text: 11 -->by&nbsp;
						          <!-- /react-text -->
						          <span class="name">{{item.target.author.name}}</span>
					          	</div>
						        <span class="feed-label"></span>
					      	</a>
					    </div>
					    <div id="infinite-scroll-trigger">
					      	<div class="loadmore"></div>
					    </div>
  					</div>
				</section> 
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:'index',
		data(){
			return{
				centen:[]
			}
		},
		created(){
			this.axios({
				method:"GET",
				url:'./static/json/index.json',
			})
			.then((res)=>{
				this.centen=res.data.recommend_feeds.slice(0,20)
			})
		}
	}
</script>
<style type="text/css" scoped>
	.page {
	    padding-top: 0.47rem;
	    max-width: 6.5rem;
	    background: #fff;
	    margin: 0 auto;
	    overflow-x: hidden;
	}
	.card {margin: 0 0.18rem;-webkit-text-size-adjust: 100%;}
	.quick-nav {overflow: hidden;margin: 0.2rem 0 0 0;padding-top: 0.06rem;}
	.quick-nav>li {float: left;width: 50%;padding: 0.03rem;box-sizing: border-box;font-size: 0.15rem;}
	.quick-nav>li>a {background-color: #f6f6f6;color: #494949;display: block;text-align: center;line-height:0.2rem;padding: 0.12rem 0;
    border-radius: 0.02rem;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}
    #recommend-feed {margin-right: -0.18rem;margin-left: -0.18rem;margin-top: 0.02rem;min-height: 4.8rem;color: #494949;-webkit-text-size-adjust: 100%;}
    .feed-item {display: block;padding:0.25rem 0.18rem 0.25rem 0;margin-left: 0.18rem;position: relative;color: #494949}
    .feed-content {overflow: hidden;margin-bottom: 0.1rem;}
    .feed-content .cover {width: 25.6%;margin-left: 0.25rem; float: right;}
    .feed-content h3 {text-align: justify;font-size:0.17rem;font-weight: 500;line-height: 1.41;color: #494949;margin-bottom: 0.06rem;}
    .feed-content p {overflow: hidden;text-align: justify;color: #aaa;font-size:0.12rem;line-height: 1.5;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
    .feed-item .author {font-size: 0.12rem;color: #ccc;}
    .feed-item ~ .feed-item {
   	 	position: relative
	}
	.feed-item ~ .feed-item::before {
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 1px;
	    background: #e3e3e3;
	    -webkit-transform: scaleY(0.5);
	    content: '';
	    position: absolute;
	    -webkit-transform-origin: 0 bottom
	}
</style>